<template>
  <div class="meal-config-block">
    <div class="block-title">{{ title }}配置{{ special ? '特殊餐食' : '' }}</div>
    <template class="flex">
      <el-form-item :label="`${special ? '特殊餐食' : title}人数`" :prop="`${prefix}Qty`">
        <el-input
          placeholder="请输入人数"
          :value="model[`${prefix}Qty`]"
          class="!w-300px"
          readonly
        />
      </el-form-item>
      <el-form-item :label="`${special ? '特殊餐食' : title}配餐总份数`" :prop="`${prefix}MealQty`">
        <el-input
          placeholder="请输入配餐总份数"
          class="!w-300px"
          :value="model[`${prefix}MealQty`]"
          readonly
        >
          <template #append>份</template>
        </el-input>
      </el-form-item>
    </template>
    <el-form-item
      :label="`${special ? '特殊餐食' : title}餐食类型`"
      :prop="`${prefix}Recipe.mealServiceName`"
    >
      <el-input class="!w-300px" :value="model[`${prefix}Recipe`]?.mealServiceName" readonly />
    </el-form-item>
    <el-form-item :label="`${special ? '特殊餐食' : title}对应餐谱`" :prop="`${prefix}Meal`">
      <div>
        <div
          class="flex"
          v-for="item in model[`${prefix}Recipe`]?.appRecipeDetailRespVOS"
          :key="item.id"
          style="margin-bottom: 5px"
        >
          <el-input class="!w-100px" v-model="item.recipeMealName" readonly />
          <div>
            <div class="flex" v-for="info in item?.appRecipeMealIngeRespVOS" :key="info.id">
              <el-input class="!w-200px" v-model="info.productName" readonly />
              <el-input
                class="!w-420px"
                v-model="info.ingredientSpec"
                style="margin-left: 20px"
                readonly
              >
                <template #prepend>
                  <p style="width: 100px">样本重量</p>
                </template>
                <!-- {{ info.standard }} -->
                <template #append>g</template>
              </el-input>
            </div>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item :label="`${special ? '特殊餐食' : title}对应餐具`">
      <div>
        <div
          v-for="item in model[`${prefix}Recipe`]?.appRecipeDetailRespVOS"
          :key="item.id"
          style="margin-bottom: 5px"
        >
          <el-input class="!w-300px" v-model="item.tablewareName" readonly>
            <template #prepend>
              <p style="width: 60px">使用餐具</p>
            </template>
          </el-input>
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'

const props = defineProps({
  prefix: {
    type: String,
    required: true // 字段前缀（如bussClass、bussClassSpc）
  },
  title: {
    type: String,
    required: true // 模块标题（如商务舱配置、商务舱特殊餐食）
  },
  model: {
    type: Object,
    required: true // 表单数据（绑定父组件的formData）
  },
  special: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: true
  }
})
</script>

<style scoped>
.meal-config-block {
  margin-bottom: 24px;
}
.block-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.row-group {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
</style>